<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script th:src="@{/jquery-3.6.0.min.js}"></script>


    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
        .top{
            height: 100px;
            width: 100%;
            background-color: pink;
            text-align: center;
            line-height: 100px;

            font-size: 30px;
            font-style: italic;
            font-family: 幼圆;
            font-weight: bold;
        }
        .left{
            height: calc(100vh - 100px);
            width: 150px;
            background-color: yellow;
            float: left;
        }
        .main{
            float: left;
            height: calc(100vh - 100px);
            width: calc(100% - 150px);

        }
        ol{
            list-style-type: none;
        }
        li{
            margin-top: 50px;
        }
    </style>
</head>

<body>

<div class="top">
    欢迎访问CRUD系统:[[${#session.getAttribute('user').userName}]] <button onclick="javascript:window.location.href='/user/logout'">系统退出</button>
</div>

<div class="left">
<ol>
    <li th:each="selected:${selectedMenus}">
        <button th:onclick="openMain([[${selected.url}]])" th:text="${selected.menuName}">用户管理</button>
    </li>
</ol>
</div>

<div class="main">
    <iframe id="main" src="/user/list" scrolling="no" width="90%" height="90%" frameborder="0" ></iframe>
</div>

</body>

<script>
    function openMain(url){
        $('#main').attr('src',url)
    }
</script>

</html>